<template>
  <div>
    <mt-header fixed title="搜索中心">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="search">
      <div class="ser-con">
        <mt-search v-model="serveKey" cancel-text="取消" placeholder="搜索" @keyup.enter.native="getserve" />
      </div>
      <div class="ser-ss">
        <span v-show="serArr.length!==0" class="title">搜索历史</span>
        <mt-cell
          :title="item" v-for="(item,index) in serArr" :key='index'><mt-button type="danger" size='small' @click.prevent.stop="delServe(index)">x</mt-button></mt-cell>
        <span v-show="serArr.length===0">没有任何搜索历史</span>
      </div>
      <msg ref="mymsg"></msg>
    </div>
    <mt-tabbar class="footer" fixed>
      <mt-tab-item id="index">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/">首页</router-link>
      </mt-tab-item>
      <mt-tab-item id="sort">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/sort">分类</router-link>
      </mt-tab-item>
      <mt-tab-item id="shoppingCar">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/shoppingCar">购物车</router-link>
      </mt-tab-item>
      <mt-tab-item id="member">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/member">会员中心</router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import msg from './msg'
export default {
  components: {
    msg
  },
  data () {
    return {
      serveKey: '',
      serArr: []
    }
  },
  created () {
  },
  mounted () {
    this.serArr = localStorage.getItem('serve') ? JSON.parse(localStorage.getItem('serve')) : []
  },
  methods: {
    getserve () {
      if (!this.serveKey.trim()) {
        console.log('不能为空')
        this.$refs.mymsg.timeClose({msg: '不能为空'})
        return false
      }
      this.serArr = localStorage.getItem('serve') ? JSON.parse(localStorage.getItem('serve')) : []
      var index = this.serArr.indexOf(this.serveKey)
      if (index !== -1) {
        this.serArr.splice(index, 1)
      }
      this.serArr.unshift(this.serveKey)
      localStorage.setItem('serve', JSON.stringify(this.serArr))
    },
    delServe (index) {
      this.serArr.splice(index, 1)
      localStorage.setItem('serve', JSON.stringify(this.serArr))
    }
  }
}
</script>

<style lang="less" scoped>
.footer a,
.mint-header a {
  color: white;
  text-decoration: none;
}
.mint-tabbar {
  background-color: #0094ff;
  height: 55 / 16rem;
}
.search {
  width: 100%;
  margin-top: 40 / 16rem;
}
.ser-con{
   position: relative;
   .mint-search {
    height: auto;
    width: 100%;
  }
  .serbtn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 3;
  }
}
.ser-ss{
  text-align: center;
  .title{
    font-size: 18 / 16rem;
  }
}
</style>
